<template>
  <v-card class="rounded-0" elevation="0">
    <v-card-text class="pa-6">
      <!-- Account Logo 和基本信息 -->
      <div class="text-center mb-6">
        <!-- 多个Logo展示 -->
        <F2Image :list="companyLogos" />

        <h2 class="text-h4 font-weight-bold mb-2 company-name">公司名称</h2>

        <!-- 公司别名 -->
        <div class="mb-3">
          <v-chip
            v-for="(alias, index) in companyAliases"
            :key="index"
            class="ma-1"
            color="secondary"
            size="small"
            variant="tonal"
          >
            {{ alias }}
          </v-chip>
        </div>

        <v-chip color="primary" size="small" variant="outlined">科技公司</v-chip>
      </div>

      <!-- 详细信息 -->
      <v-list class="bg-transparent">
        <v-list-item class="px-0 info-item">
          <template #prepend>
            <v-icon color="primary" :icon="mdiCalendar" />
          </template>
          <v-list-item-title class="text-body-2 text-medium-emphasis">创建时间</v-list-item-title>
          <v-list-item-subtitle class="text-body-1">2020年3月15日</v-list-item-subtitle>
        </v-list-item>

        <v-list-item class="px-0 info-item">
          <template #prepend>
            <v-icon color="primary" :icon="mdiAccountGroup" />
          </template>
          <v-list-item-title class="text-body-2 text-medium-emphasis">员工规模</v-list-item-title>
          <v-list-item-subtitle class="text-body-1">500-1000人</v-list-item-subtitle>
        </v-list-item>

        <v-list-item class="px-0 info-item">
          <template #prepend>
            <v-icon color="primary" :icon="mdiWeb" />
          </template>
          <v-list-item-title class="text-body-2 text-medium-emphasis">域名</v-list-item-title>
          <v-list-item-subtitle class="text-body-1">
            <a class="domain-link" href="https://example.com" target="_blank">example.com</a>
          </v-list-item-subtitle>
        </v-list-item>

        <v-list-item class="px-0 info-item">
          <template #prepend>
            <v-icon color="primary" :icon="mdiServerNetwork" />
          </template>
          <v-list-item-title class="text-body-2 text-medium-emphasis">AS号</v-list-item-title>
          <v-list-item-subtitle class="text-body-1">
            <v-chip color="info" size="small" variant="tonal">AS13335</v-chip>
          </v-list-item-subtitle>
        </v-list-item>

        <v-list-item class="px-0 info-item">
          <template #prepend>
            <v-icon color="primary" :icon="mdiFactory" />
          </template>
          <v-list-item-title class="text-body-2 text-medium-emphasis">涉及行业</v-list-item-title>
          <v-list-item-subtitle class="text-body-1">
            <v-chip-group>
              <v-chip size="small" variant="outlined">人工智能</v-chip>
              <v-chip size="small" variant="outlined">软件开发</v-chip>
              <v-chip size="small" variant="outlined">云计算</v-chip>
            </v-chip-group>
          </v-list-item-subtitle>
        </v-list-item>
      </v-list>

      <!-- 公司简介 -->
      <v-divider class="my-4 section-divider"></v-divider>
      <div class="mb-4">
        <h3 class="text-h6 mb-2 section-title">公司简介</h3>
        <p class="text-body-2 text-medium-emphasis description-text">
          这是一家专注于人工智能和软件开发的创新型科技公司，致力于为客户提供高质量的技术解决方案。
          公司拥有经验丰富的技术团队，在AI、云计算等领域具有深厚的技术积累。
        </p>
      </div>

      <!-- 关联公司 -->
      <v-divider class="my-4 section-divider"></v-divider>
      <div class="mb-4">
        <h3 class="text-h6 mb-3 section-title">关联公司</h3>

        <!-- 投资商 -->
        <div v-if="relatedCompanies.investors.length > 0" class="mb-3">
          <h4 class="text-subtitle-2 mb-2 relation-title">
            <v-icon class="mr-1" :icon="mdiCashMultiple" size="small" />
            投资商
          </h4>
          <div class="company-chips">
            <v-chip
              v-for="company in relatedCompanies.investors"
              :key="company.id"
              class="ma-1"
              color="success"
              size="small"
              variant="outlined"
              @click="viewCompany(company)"
            >
              {{ company.name }}
            </v-chip>
          </div>
        </div>

        <!-- 子公司 -->
        <div v-if="relatedCompanies.subsidiaries.length > 0" class="mb-3">
          <h4 class="text-subtitle-2 mb-2 relation-title">
            <v-icon class="mr-1" :icon="mdiSitemap" size="small" />
            子公司
          </h4>
          <div class="company-chips">
            <v-chip
              v-for="company in relatedCompanies.subsidiaries"
              :key="company.id"
              class="ma-1"
              color="primary"
              size="small"
              variant="outlined"
              @click="viewCompany(company)"
            >
              {{ company.name }}
            </v-chip>
          </div>
        </div>

        <!-- 供货商 -->
        <div v-if="relatedCompanies.suppliers.length > 0" class="mb-3">
          <h4 class="text-subtitle-2 mb-2 relation-title">
            <v-icon class="mr-1" :icon="mdiTruckDelivery" size="small" />
            供货商
          </h4>
          <div class="company-chips">
            <v-chip
              v-for="company in relatedCompanies.suppliers"
              :key="company.id"
              class="ma-1"
              color="orange"
              size="small"
              variant="outlined"
              @click="viewCompany(company)"
            >
              {{ company.name }}
            </v-chip>
          </div>
        </div>

        <!-- 客户公司 -->
        <div v-if="relatedCompanies.customers.length > 0" class="mb-3">
          <h4 class="text-subtitle-2 mb-2 relation-title">
            <v-icon class="mr-1" :icon="mdiAccountTie" size="small" />
            客户公司
          </h4>
          <div class="company-chips">
            <v-chip
              v-for="company in relatedCompanies.customers"
              :key="company.id"
              class="ma-1"
              color="info"
              size="small"
              variant="outlined"
              @click="viewCompany(company)"
            >
              {{ company.name }}
            </v-chip>
          </div>
        </div>

        <!-- 联盟伙伴 -->
        <div v-if="relatedCompanies.partners.length > 0" class="mb-3">
          <h4 class="text-subtitle-2 mb-2 relation-title">
            <v-icon class="mr-1" :icon="mdiHandshake" size="small" />
            联盟伙伴
          </h4>
          <div class="company-chips">
            <v-chip
              v-for="company in relatedCompanies.partners"
              :key="company.id"
              class="ma-1"
              color="purple"
              size="small"
              variant="outlined"
              @click="viewCompany(company)"
            >
              {{ company.name }}
            </v-chip>
          </div>
        </div>
      </div>

      <!-- 媒体页面链接 -->
      <v-divider class="my-4 section-divider"></v-divider>
      <div>
        <h3 class="text-h6 mb-3 section-title">媒体页面</h3>
        <div class="d-flex flex-column gap-2">
          <v-btn
            class="social-btn justify-start"
            href="https://linkedin.com/company/example-tech"
            :prepend-icon="mdiLinkedin"
            size="small"
            target="_blank"
            variant="outlined"
          >
            <span class="social-platform">LinkedIn:</span>
            <span class="social-id">example-tech</span>
          </v-btn>
          <v-btn
            class="social-btn justify-start"
            href="https://twitter.com/example_tech"
            :prepend-icon="mdiTwitter"
            size="small"
            target="_blank"
            variant="outlined"
          >
            <span class="social-platform">Twitter:</span>
            <span class="social-id">@example_tech</span>
          </v-btn>
          <v-btn
            class="social-btn justify-start"
            href="https://facebook.com/exampletech"
            :prepend-icon="mdiFacebook"
            size="small"
            target="_blank"
            variant="outlined"
          >
            <span class="social-platform">Facebook:</span>
            <span class="social-id">exampletech</span>
          </v-btn>
        </div>
      </div>
    </v-card-text>
  </v-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  mdiAccountGroup,
  mdiAccountTie,
  mdiCalendar,
  mdiCashMultiple,
  mdiFacebook,
  mdiFactory,
  mdiHandshake,
  mdiLinkedin,
  mdiServerNetwork,
  mdiSitemap,
  mdiTruckDelivery,
  mdiTwitter,
  mdiWeb
} from '@mdi/js'
import F2Image from '@/components/image/f2-image.vue'

// 公司Logo数据 - 支持多个logo
const companyLogos = ref([
  {
    url: 'http://gips3.baidu.com/it/u=119870705,2790914505&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720',
    name: '简化Logo'
  },
  {
    url: 'https://p2.itc.cn/q_70/images03/20211130/e694e7c32e8b40e09394034bb8c4fb88.png',
    name: '主要Logo'
  },
  {
    url: 'https://i0.hdslb.com/bfs/archive/4d89029600a5e37623017c08372362bf0e8198c4.jpg',
    name: '简化Logo'
  },
  {
    url: 'https://qcloud.dpfile.com/pc/pPtTV-iOWZmuHUfA11HmGtf_MbQPN9NqtRA4dxQnFZh_SiWfx3oDy_Gts3sOzBeH.jpg',
    name: '简化Logo'
  },
  {
    url: 'https://q6.itc.cn/images01/20250717/4e30d26680ce499daf1a9f92dc144b5f.jpeg',
    name: '简化Logo'
  }
])

// 公司别名数据
const companyAliases = ref(['Example Tech', 'ET Corp', '示例科技'])

// 关联公司数据
const relatedCompanies = ref({
  investors: [
    { id: 1, name: '红杉资本', type: 'investor' },
    { id: 2, name: '腾讯投资', type: 'investor' },
    { id: 3, name: '阿里巴巴', type: 'investor' }
  ],
  subsidiaries: [
    { id: 4, name: '示例AI研究院', type: 'subsidiary' },
    { id: 5, name: '示例云计算', type: 'subsidiary' }
  ],
  suppliers: [
    { id: 6, name: '英伟达', type: 'supplier' },
    { id: 7, name: '亚马逊云服务', type: 'supplier' },
    { id: 8, name: '微软Azure', type: 'supplier' }
  ],
  customers: [
    { id: 9, name: '字节跳动', type: 'customer' },
    { id: 10, name: '美团', type: 'customer' },
    { id: 11, name: '滴滴出行', type: 'customer' }
  ],
  partners: [
    { id: 12, name: 'OpenAI联盟', type: 'partner' },
    { id: 13, name: '中国AI产业联盟', type: 'partner' }
  ]
})

// 查看公司详情
function viewCompany(company: any) {
  console.log('查看公司:', company)
  // 这里可以实现跳转到公司详情页面的逻辑
}
</script>

<style scoped>
.gap-2 {
  gap: 8px;
}

/* 公司名称样式 */
.company-name {
  color: rgb(var(--v-theme-on-surface));
  transition: color 0.3s ease;
}

/* 信息项悬停效果 */
.info-item {
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.info-item:hover {
  background-color: rgba(var(--v-theme-on-surface), 0.04);
}

/* 域名链接样式 */
.domain-link {
  color: rgb(var(--v-theme-primary));
  text-decoration: none;
  transition: color 0.2s ease;
}

.domain-link:hover {
  color: rgb(var(--v-theme-primary));
  text-decoration: underline;
}

/* 分割线样式 */
.section-divider {
  border-color: rgba(var(--v-theme-outline), 0.2);
}

/* 章节标题样式 */
.section-title {
  color: rgb(var(--v-theme-on-surface));
  font-weight: 600;
}

/* 描述文本样式 */
.description-text {
  line-height: 1.6;
  color: rgba(var(--v-theme-on-surface), 0.7);
}

/* 社交媒体按钮样式 */
.social-btn {
  transition: all 0.2s ease;
  width: 100%;
  text-transform: none;
}

.social-btn:hover {
  background-color: rgba(var(--v-theme-primary), 0.08);
  transform: translateY(-1px);
}

.social-platform {
  font-weight: 500;
  margin-right: 4px;
}

.social-id {
  color: rgba(var(--v-theme-on-surface), 0.7);
  font-family: monospace;
}

/* 关联公司样式 */
.relation-title {
  color: rgb(var(--v-theme-on-surface));
  font-weight: 500;
  display: flex;
  align-items: center;
}

.company-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.company-chips .v-chip {
  cursor: pointer;
  transition: all 0.2s ease;
}

.company-chips .v-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 深色主题特定样式 */
.v-theme--dark .logo-avatar {
  border-color: rgba(var(--v-theme-outline), 0.3);
}

.v-theme--dark .description-text {
  color: rgba(var(--v-theme-on-surface), 0.8);
}

.v-theme--dark .section-divider {
  border-color: rgba(var(--v-theme-outline), 0.3);
}

.v-theme--dark .social-id {
  color: rgba(var(--v-theme-on-surface), 0.8);
}
</style>
